<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>table列表页</title>
    <link rel="stylesheet" th:href="@{/resources/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/resources/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/resources/awi/css/font-awesome.css}">
    <link rel="stylesheet" th:href="@{/resources/plugins/ztree/css/zTreeStyle/zTreeStyle.css}">
    <style>
        body{
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
                <li><a href="#">内容管理</a></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2" >
            <div class="panel panel-default" style="min-height: 600px;">
                <div class="panel-heading">
                    组织结构
                </div>
                <div class="panel-body">
                    <ul id="orgTree" class="ztree">

                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-10" id="table-panel" >
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default" >
                        <div class="panel-heading">查询参数</div>
                        <div class="panel-body">
                            <form id="searchForm" class="form-inline">
                                <div class="col-md-3 form-group">
                                    <label>参数</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <div class="form-inline">
                                        <label>参数</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-inline">
                                        <label>参数</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-success"><i class="fa fa-search"></i>查询
                                        </button>
                                        <button type="button" class="btn btn-warning"><i class="fa fa-refresh"></i> 重置
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="toolbar">
                <div class="col-md-12">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary" onclick="addNew()"><i class="fa fa-plus"></i>新增
                        </button>
                        <button type="button" class="btn btn-danger"><i class="fa fa-remove"></i>删除</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-refresh"></i>刷新</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <table id="dataTable" data-url="/fos/pageList" class="data-table" data-height="500"
                           data-locale="zh-CN" data-pagination="true" data-response-handler="dataTableResponseHandler"
                           data-side-pagination="server" data-toolbar="toolbar">
                        <thead>
                        <tr>
                            <th data-title="文件名" data-field="fileName" data-align="center" data-valign="middle"></th>
                            <th data-title="文件大小" data-field="fileSize" data-align="center" data-valign="middle"></th>
                            <th data-title="文件MD5" data-field="fileMd5" data-align="center" data-valign="middle"></th>
                            <th data-title="创建时间" data-field="createTime" data-align="center" data-valign="middle"></th>
                            <th data-title="操作" data-field="uid" data-align="center" data-valign="middle"
                                data-width="200"
                                data-formatter="opFormatter"></th>
                        </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

</div>
</body>
<script th:src="@{/resources/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/bootstrap/js/bootstrap.min.js}"></script>

<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/resources/plugins/bootstrap-table/bootstrap-table-locale-all.min.js}"></script>
<script th:src="@{/resources/awi/js/app.min.js}"></script>
<script th:src="@{/resources/awi/js/app_iframe.min.js}"></script>
<script th:src="@{/resources/plugins/plugins-init/plugins-init.js}"></script>
<script th:src="@{/resources/plugins/ztree/js/jquery.ztree.all.min.js}"></script>
<script type="text/javascript">
    //若需操作tab，如动态添加或删除，需在页面中引入 app.min.js 以及 app_iframe.min.js,调用parent对象的addTabs方法即可。
    function addNew() {
        parent.addTabs({
            id: '10009',
            title: '添加',
            close: true,
            url: '/plugins/form',
            urlType: "iframe-tab"
        });

    }

    function opFormatter(value, row, index) {
        var removeBtn = '<button class="btn btn-danger btn-xs"><i class="fa fa-remove"></i>删除</button>';
        var editBtn = '<button class="btn btn-primary btn-xs"><i class="fa fa-edit"></i>编辑</button>';
        return '<div class="btn-group btn-group-xs">' + removeBtn + editBtn + '</div>';
    }

    $(function () {
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            }
        };
        var treeNodes = [
            {"id":1, "pId":0, "name":"test1"},
            {"id":11, "pId":1, "name":"test11"},
            {"id":12, "pId":1, "name":"test12"},
            {"id":111, "pId":11, "name":"test111"}
        ];
        var zTreeObj = $.fn.zTree.init($("#orgTree"), setting, treeNodes);


    });
</script>
</html>